<template>
  <div class="tabbar">
    <div class="tabbar-item" @click="$router.push('/Home')">
      <span>首页</span>
    </div>
    <div class="tabbar-item" @click="$router.push('/About')">
      <span>关于我们</span>
    </div>
    <div class="tabbar-item" @click="$router.push('/Profile')">
      <span>我的</span>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.tabbar {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  z-index: 100;
  .tabbar-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;

    img {
      display: block;
      margin: 0 auto 4px;
      width: 24px;
      height: 24px;
    }

    span {
      font-size: 24px;
      color: #333;
    }
  }
}
</style>